<template>
  <!-- 筛选栏 -->
  <el-row style="margin: 5px 15px 15px 0px">
    <el-input
      placeholder="请输入商品名称"
      style="width:20%; margin-right:15px;"
      v-model="queryParams.q"
    >
      <template slot="prepend">商品名称:</template>
    </el-input>

    <el-input style="width:15%" v-model="queryParams.priseBegin">
      <template slot="prepend">价格区间:</template>
    </el-input>
    -
    <el-input style="width:8%; margin-right:15px;" v-model="queryParams.priseEnd">
    </el-input>

    <el-autocomplete
      popper-class="my-autocomplete"
      v-model="queryParams.goodsType"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
      style="margin-right:15px;"
    >
      <template slot="prepend">商品类型:</template>
      <template slot-scope="{ item }">
        <div class="name">{{ item }}</div>
      </template>
    </el-autocomplete>

    <el-button
      type="primary"
      icon="el-icon-search"
      @click="$emit('getgoodslist')"
    >搜索</el-button>

  </el-row>
</template>

<script>
import { getGoodsTypes } from '@/api/goods'
export default {
  props: {
    queryParams: {
      type: Object
    }
  },
  data () {
    return {
      restaurants: []
    }
  },
  async mounted () {
    this.restaurants = await getGoodsTypes();
  },
  methods: {
    querySearch (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(item => item.indexOf(queryString) != -1) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    handleSelect (item) {
      this.queryParams.goodsType = item
    }
  }
}
</script>

<style scoped lang="less">
</style>
